<template>
  <div class="pointConfig-list">
    <el-dialog :title="formTitle" :visible.sync="visible" height="700px" width="80%" :close-on-click-modal=false  @close="dialogClose">
      <el-table
        stripe
        ref="pointConfigTable"
        height="800"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :data="userPointConfigDataList"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          align="center"
          label="点位名称"
          prop="point_name"
        >
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: "pointConfigList",
    methods: {
      pointConfigQuery(){
        let me = this;
        this.visible = true;
        this.$axios.post('userConfigRoutes', {
          action_type: 'pointConfigQuery',
          device_id:me.$parent.$route.params.device_id,
          user_id:me.$parent.$route.params.user_id
        }).then(function (response) {
          me.userPointConfigDataList = response.data.data;
          me.pointConfigSelection = response.data.pointConfig;
          me.$nextTick(()=>{
            me.pointConfigSelection.forEach(row => {
              for(let data of me.userPointConfigDataList){
                if(data.point_id === parseInt(row)){
                  me.$refs.pointConfigTable.toggleRowSelection(data,true);
                  break;
                }
              }
            })
          })
        })
      },
      handleSelectionChange(val) {
        this.pointConfigSelection = val;
      },
      submit(){
        let me = this;
        let user_id = this.$parent.$route.params.user_id;
        let device_id = this.$parent.$route.params.device_id;
        let pointList = this.pointConfigSelection;
        this.$axios.post('userConfigRoutes', {
          action_type: 'pointConfig',
          user_id:user_id,
          device_id:device_id,
          pointList:pointList,
        }).then(function (response) {
          me.reset();
          me.visible = false;
          me.$parent.queryData();
        })
      },
      reset(){
        this.$refs.pointConfigTable.clearSelection();
        this.pointConfigSelection = [];
        this.userPointConfigDataList = [];
      },
      dialogClose() {
        this.reset();
      }
    },
    data() {
      return {
        userPointConfigDataList : [],
        pointConfigSelection:[],
        formTitle: '配置点位',
        visible: false,
      }
    },
  }
</script>

<style lang="scss" scoped>
  .pointConfig-list {
    background-color: #fff;
  }
</style>
